<template>
  <div class="address-box">
    <u-icon size="16" color="#fff" name="map"></u-icon>
    <div class="city-right-layout" @click="isShowAddressWindow = true">
      <view style="margin-right: 5px;">
        {{ isSelected() ? getSelectAddress() : "" }}</view
      >

      <u-icon size="16" color="#fff" name="arrow-down"></u-icon>
    </div>

    <!--  地区选择 -->
    <u-picker
      ref="areaPicker"
      :defaultIndex="defaultIndex"
      :show="isShowAddressWindow"
      :columns="columns"
      @cancel="isShowAddressWindow = false"
      @change="changeHandler"
      @confirm="onAddressConfirm"
    ></u-picker>
  </div>
</template>

<script>
import { PROVINCE, CITY } from "@/common/addressData";
export default {
  data() {
    return {
      PROVINCE,
      CITY,
      defaultIndex: [0, 0],
      columns: [PROVINCE, CITY[0]],
      isShowAddressWindow: false,
      provinceIndex: 0,
      cityIndex: 0,
      provinceList: [],
      cityList: [],
      fromData: {},
    };
  },
  created() {
    this.setAea()
  },
  methods: {
    setAea() {

      let residentCity = uni.getStorageSync("residentCity")
      let residentCityArr = residentCity.split("-");
      let province = residentCityArr[0];
      let city = residentCityArr.length > 1 ? residentCityArr[1] : "";
      this.fromData = {
        province,
        city,
      };
      for (let i = 0; i < this.PROVINCE.length; i++) {
        if (this.PROVINCE[i] === province) {
          this.provinceIndex = i;
        }
      }
      if (city) {
        for (let i = 0; i < this.CITY[this.provinceIndex].length; i++) {
          if (this.CITY[this.provinceIndex][i] === city) {
            this.cityIndex = i;
          }
        }
      }
      this.provinceList = [...this.PROVINCE]
      let element = this.provinceList.splice(this.provinceIndex, 1)[0];
      this.provinceList.splice(0, 0, element);
      this.cityList = [...this.CITY]
      let ele = this.cityList.splice(this.provinceIndex, 1)[0];
      this.cityList.splice(0, 0, ele);
      this.columns = [this.provinceList, this.cityList[0]]
      this.defaultIndex = [0, this.cityIndex]
      // 重置为0
      this.provinceIndex = 0
    },
    getSelectAddress() {
      if (this.fromData.city) {
        return `${this.fromData.city}`;
      } else {
        return `${this.fromData.province}`;
      }
    },
    isSelected() {
      return this.fromData.province || this.fromData.city;
    },
    // 地址选择监听
    changeHandler(e) {
      const { columnIndex, index, picker } = e;
      if (columnIndex == 0) {
        // 切换省份
        this.provinceIndex = index;
        picker.setColumnValues(1, this.cityList[this.provinceIndex]);
      } else if (columnIndex == 1) {
        // 切换市区
        this.cityIndex = index;
      }
    },
    // 地区选择确定
    onAddressConfirm() {
      this.isShowAddressWindow = false;
      this.fromData.province = this.provinceList[this.provinceIndex];
      this.fromData.city = this.cityList[this.provinceIndex][this.cityIndex];
      // 确定选择后恢复默认index
      this.provinceIndex = 0;
      this.cityIndex = 0;
      this.$emit('changeCity', {province: this.fromData.province, city: this.fromData.city})
    },
  },
};
</script>

<style lang="scss" scoped>
.address-box {
  position: absolute;
  top: 30rpx;
  left: 40rpx;
  color: #fff;
  align-items: center;
  justify-content: right;
  display: flex;
  width: auto;
  
}
.city-right-layout {
  margin-left: 5px;
  font-size: 14px;
  align-items: center;
  justify-content: right;
  display: flex;
}
</style>